<template>
  <div class="sensitive-word-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1>敏感词管理</h1>
        <p>管理系统敏感词库，支持多种过滤模式和分类管理</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="handleCreate">
          <el-icon><Plus /></el-icon>
          新增敏感词
        </el-button>
        <el-button type="success" @click="handleBatchCreate">
          <el-icon><Plus /></el-icon>
          批量创建
        </el-button>
        <el-button type="info" @click="handleImport">
          <el-icon><Upload /></el-icon>
          批量导入
        </el-button>
        <el-button type="warning" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>

        <!-- 更多功能下拉菜单 -->
        <el-dropdown @command="handleMoreOperation">
          <el-button>
            更多功能
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="popular">
                <el-icon><TrendCharts /></el-icon>
                热门敏感词
              </el-dropdown-item>
              <el-dropdown-item command="system">
                <el-icon><Setting /></el-icon>
                系统管理
              </el-dropdown-item>
              <el-dropdown-item command="statistics" divided>
                <el-icon><DataAnalysis /></el-icon>
                统计分析
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 统计卡片 -->
    <StatisticsCards
      :statistics="statistics"
      :loading="statisticsLoading"
      @refresh="loadStatistics"
    />

    <!-- 搜索和过滤 -->
    <el-card class="search-card">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="敏感词">
          <el-input
            v-model="searchForm.word"
            placeholder="搜索敏感词内容"
            clearable
            style="width: 200px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="searchForm.type"
            placeholder="选择类型"
            clearable
            style="width: 120px"
          >
            <el-option
              v-for="type in sensitiveWordTypes"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="严重程度">
          <el-select
            v-model="searchForm.severity"
            placeholder="选择程度"
            clearable
            style="width: 120px"
          >
            <el-option
              v-for="severity in severityLevels"
              :key="severity.value"
              :label="severity.label"
              :value="severity.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="过滤模式">
          <el-select
            v-model="searchForm.filterMode"
            placeholder="选择模式"
            clearable
            style="width: 120px"
          >
            <el-option
              v-for="mode in filterModes"
              :key="mode.value"
              :label="mode.label"
              :value="mode.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="选择状态"
            clearable
            style="width: 100px"
          >
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-input
            v-model="searchForm.tags"
            placeholder="搜索标签"
            clearable
            style="width: 120px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
            @change="handleDateRangeChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
          <el-button type="warning" @click="showAdvancedSearch = true">
            <el-icon><Setting /></el-icon>
            高级搜索
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 批量操作 -->
    <el-card v-if="selectedWords.length > 0" class="batch-operations">
      <div class="batch-info">
        <span>已选择 {{ selectedWords.length }} 个敏感词</span>
        <div class="batch-actions">
          <el-button
            type="success"
            size="small"
            @click="handleBatchOperation('enable')"
          >
            <el-icon><Check /></el-icon>
            批量启用
          </el-button>
          <el-button
            type="warning"
            size="small"
            @click="handleBatchOperation('disable')"
          >
            <el-icon><Close /></el-icon>
            批量禁用
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleBatchOperation('delete')"
          >
            <el-icon><Delete /></el-icon>
            批量删除
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 敏感词列表 -->
    <el-card class="table-card">
      <el-table
        v-loading="loading"
        :data="wordList"
        stripe
        border
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" sortable="custom" />
        <el-table-column
          prop="word"
          label="敏感词"
          min-width="120"
          sortable="custom"
        >
          <template #default="{ row }">
            <el-text
              class="sensitive-word-text"
              :type="row.status === 1 ? 'primary' : 'info'"
            >
              {{ row.word }}
            </el-text>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120" sortable="custom">
          <template #default="{ row }">
            <el-tag
              size="small"
              :style="{
                backgroundColor: SensitiveWordManagementUtils.getTypeColor(
                  row.type
                ),
                color: '#ffffff',
                border: 'none'
              }"
            >
              {{ row.typeDescription }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="severity"
          label="严重程度"
          width="100"
          sortable="custom"
        >
          <template #default="{ row }">
            <el-tag
              size="small"
              :style="{
                backgroundColor: SensitiveWordManagementUtils.getSeverityColor(
                  row.severity
                ),
                color: '#ffffff',
                border: 'none'
              }"
            >
              {{ row.severityDescription }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="filterMode" label="过滤模式" width="100">
          <template #default="{ row }">
            <el-tag
              :type="row.filterMode === 'REPLACE' ? 'success' : 'warning'"
              size="small"
            >
              {{ row.filterModeDescription }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="replacement" label="替换文本" width="100">
          <template #default="{ row }">
            <span v-if="row.replacement">{{ row.replacement }}</span>
            <span v-else class="text-placeholder">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="matchCount"
          label="匹配次数"
          width="100"
          sortable="custom"
        >
          <template #default="{ row }">
            <el-text type="primary">{{ row.matchCount || 0 }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="tagList" label="标签" width="150">
          <template #default="{ row }">
            <div class="tag-list">
              <el-tag
                v-for="tag in row.tagList?.slice(0, 2)"
                :key="tag"
                size="small"
                effect="plain"
                class="tag-item"
              >
                {{ tag }}
              </el-tag>
              <el-text
                v-if="row.tagList && row.tagList.length > 2"
                type="info"
                size="small"
              >
                +{{ row.tagList.length - 2 }}
              </el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="160"
          sortable="custom"
        >
          <template #default="{ row }">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleView(row)">
              查看
            </el-button>
            <el-button type="success" size="small" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-dropdown
              @command="command => handleDropdownCommand(command, row)"
            >
              <el-button type="info" size="small">
                更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="toggle" :disabled="false">
                    {{ row.status === 1 ? "禁用" : "启用" }}
                  </el-dropdown-item>
                  <el-dropdown-item command="copy">复制</el-dropdown-item>
                  <el-dropdown-item command="delete" divided
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 敏感词详情对话框 -->
    <SensitiveWordDetail
      v-model:visible="showDetail"
      :word-id="currentWordId"
      @refresh="handleRefresh"
    />

    <!-- 敏感词编辑对话框 -->
    <SensitiveWordForm
      v-model:visible="showForm"
      :word-id="currentWordId"
      :mode="formMode"
      @success="handleFormSuccess"
    />

    <!-- 高级搜索对话框 -->
    <AdvancedSearchDialog
      v-model:visible="showAdvancedSearch"
      :search-form="searchForm"
      @search="handleAdvancedSearch"
    />

    <!-- 批量导入对话框 -->
    <ImportDialog v-model:visible="showImport" @success="handleImportSuccess" />

    <!-- 批量创建对话框 -->
    <BatchCreateDialog
      v-model:visible="showBatchCreate"
      @success="handleBatchCreateSuccess"
    />

    <!-- 系统管理对话框 -->
    <SystemManagementDialog v-model:visible="showSystemManagement" />

    <!-- 热门敏感词对话框 -->
    <PopularWordsDialog
      v-model:visible="showPopularWords"
      @view-detail="handleViewWordDetail"
      @edit-word="handleEditWord"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Plus,
  Upload,
  Download,
  Search,
  Refresh,
  Setting,
  Check,
  Close,
  Delete,
  ArrowDown,
  TrendCharts,
  DataAnalysis
} from "@element-plus/icons-vue";
import StatisticsCards from "./components/StatisticsCards.vue";
import SensitiveWordDetail from "./components/SensitiveWordDetail.vue";
import SensitiveWordForm from "./components/SensitiveWordForm.vue";
import AdvancedSearchDialog from "./components/AdvancedSearchDialog.vue";
import ImportDialog from "./components/ImportDialog.vue";
import BatchCreateDialog from "./components/BatchCreateDialog.vue";
import SystemManagementDialog from "./components/SystemManagementDialog.vue";
import PopularWordsDialog from "./components/PopularWordsDialog.vue";
import {
  getSensitiveWordListApi,
  getSensitiveWordStatisticsApi,
  enableSensitiveWordApi,
  disableSensitiveWordApi,
  deleteSensitiveWordApi,
  batchOperateSensitiveWordsApi,
  batchUpdateStatusApi,
  batchDeleteSensitiveWordsApi,
  getPopularSensitiveWordsApi,
  exportSensitiveWordsApi,
  SensitiveWordType,
  SeverityLevel,
  FilterMode,
  SensitiveWordManagementUtils,
  type SensitiveWordInfo,
  type SensitiveWordQuery,
  type SensitiveWordStatistics,
  type PopularSensitiveWord,
  type BatchCreateResult
} from "@/api/sensitive-word-management";

defineOptions({
  name: "SensitiveWordManagement"
});

// 响应式数据
const loading = ref(false);
const statisticsLoading = ref(false);
const wordList = ref<SensitiveWordInfo[]>([]);
const selectedWords = ref<SensitiveWordInfo[]>([]);
const statistics = ref<SensitiveWordStatistics | null>(null);
const dateRange = ref<[string, string] | null>(null);

// 对话框状态
const showDetail = ref(false);
const showForm = ref(false);
const showAdvancedSearch = ref(false);
const showImport = ref(false);
const showBatchCreate = ref(false);
const showSystemManagement = ref(false);
const showPopularWords = ref(false);
const currentWordId = ref<number | null>(null);
const formMode = ref<"create" | "edit">("create");

// 分页信息
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
});

// 搜索表单
const searchForm = reactive<SensitiveWordQuery>({
  current: 1,
  size: 10,
  word: "",
  type: undefined,
  severity: undefined,
  filterMode: undefined,
  status: undefined,
  tags: "",
  startTime: "",
  endTime: "",
  sortField: "createTime",
  sortOrder: "desc"
});

// 选项数据
const sensitiveWordTypes = computed(() => [
  { label: "脏话", value: SensitiveWordType.PROFANITY },
  { label: "政治敏感", value: SensitiveWordType.POLITICS },
  { label: "广告", value: SensitiveWordType.ADVERTISEMENT },
  { label: "暴力内容", value: SensitiveWordType.VIOLENCE },
  { label: "违法内容", value: SensitiveWordType.ILLEGAL },
  { label: "垃圾信息", value: SensitiveWordType.SPAM }
]);

const severityLevels = computed(() => [
  { label: "轻微", value: SeverityLevel.LIGHT },
  { label: "一般", value: SeverityLevel.NORMAL },
  { label: "中等", value: SeverityLevel.MEDIUM },
  { label: "严重", value: SeverityLevel.SERIOUS },
  { label: "极严重", value: SeverityLevel.CRITICAL }
]);

const filterModes = computed(() => [
  { label: "替换模式", value: FilterMode.REPLACE },
  { label: "拦截模式", value: FilterMode.BLOCK }
]);

// 工具函数
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return "-";
  return new Date(dateTime).toLocaleString();
};

// 加载敏感词列表
const loadWordList = async () => {
  try {
    loading.value = true;
    const params = {
      ...searchForm,
      current: pagination.current,
      size: pagination.size
    };

    const response = await getSensitiveWordListApi(params);

    if (response.code === 200 && response.data) {
      wordList.value = response.data.records.map(item => ({
        ...item,
        tagList: SensitiveWordManagementUtils.parseTagList(item.tags)
      }));
      pagination.total = response.data.total;
      pagination.current = response.data.current;
      pagination.size = response.data.size;
    } else {
      ElMessage.error(response.message || "加载敏感词列表失败");
    }
  } catch (error) {
    console.error("加载敏感词列表失败:", error);
    ElMessage.error("加载敏感词列表失败");
  } finally {
    loading.value = false;
  }
};

// 加载统计信息
const loadStatistics = async () => {
  try {
    statisticsLoading.value = true;
    const response = await getSensitiveWordStatisticsApi();

    if (response.code === 200 && response.data) {
      statistics.value = response.data;
    } else {
      console.error("加载统计信息失败:", response.message);
    }
  } catch (error) {
    console.error("加载统计信息失败:", error);
  } finally {
    statisticsLoading.value = false;
  }
};

// 搜索处理
const handleSearch = () => {
  pagination.current = 1;
  loadWordList();
};

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, {
    current: 1,
    size: 10,
    word: "",
    type: undefined,
    severity: undefined,
    filterMode: undefined,
    status: undefined,
    tags: "",
    startTime: "",
    endTime: "",
    sortField: "createTime",
    sortOrder: "desc"
  });
  dateRange.value = null;
  pagination.current = 1;
  loadWordList();
};

// 日期范围变化
const handleDateRangeChange = (dates: [string, string] | null) => {
  if (dates) {
    searchForm.startTime = dates[0];
    searchForm.endTime = dates[1];
  } else {
    searchForm.startTime = "";
    searchForm.endTime = "";
  }
};

// 高级搜索
const handleAdvancedSearch = (params: SensitiveWordQuery) => {
  Object.assign(searchForm, params);
  pagination.current = 1;
  loadWordList();
  showAdvancedSearch.value = false;
};

// 选择变化
const handleSelectionChange = (selection: SensitiveWordInfo[]) => {
  selectedWords.value = selection;
};

// 排序变化
const handleSortChange = ({ prop, order }: { prop: string; order: string }) => {
  searchForm.sortField = prop;
  searchForm.sortOrder = order === "ascending" ? "asc" : "desc";
  loadWordList();
};

// 分页变化
const handleSizeChange = (size: number) => {
  pagination.size = size;
  pagination.current = 1;
  searchForm.size = size;
  loadWordList();
};

const handleCurrentChange = (current: number) => {
  pagination.current = current;
  searchForm.current = current;
  loadWordList();
};

// 刷新
const handleRefresh = () => {
  loadWordList();
  loadStatistics();
};

// 创建敏感词
const handleCreate = () => {
  currentWordId.value = null;
  formMode.value = "create";
  showForm.value = true;
};

// 查看详情
const handleView = (row: SensitiveWordInfo) => {
  currentWordId.value = row.id;
  showDetail.value = true;
};

// 编辑敏感词
const handleEdit = (row: SensitiveWordInfo) => {
  currentWordId.value = row.id;
  formMode.value = "edit";
  showForm.value = true;
};

// 状态切换
const handleStatusChange = async (row: SensitiveWordInfo) => {
  try {
    const action = row.status === 1 ? "启用" : "禁用";
    await ElMessageBox.confirm(`确定要${action}这个敏感词吗？`, "确认操作", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });

    const api =
      row.status === 1 ? enableSensitiveWordApi : disableSensitiveWordApi;
    const response = await api(row.id);

    if (response.code === 200) {
      ElMessage.success(`${action}成功`);
      handleRefresh();
    } else {
      // 恢复原状态
      row.status = row.status === 1 ? 0 : 1;
      ElMessage.error(response.message || `${action}失败`);
    }
  } catch (error) {
    if (error !== "cancel") {
      // 恢复原状态
      row.status = row.status === 1 ? 0 : 1;
      console.error("状态切换失败:", error);
      ElMessage.error("状态切换失败");
    } else {
      // 用户取消，恢复原状态
      row.status = row.status === 1 ? 0 : 1;
    }
  }
};

// 下拉菜单命令处理
const handleDropdownCommand = async (
  command: string,
  row: SensitiveWordInfo
) => {
  switch (command) {
    case "toggle":
      row.status = row.status === 1 ? 0 : 1;
      await handleStatusChange(row);
      break;
    case "copy":
      await handleCopy(row);
      break;
    case "delete":
      await handleDelete(row);
      break;
  }
};

// 复制敏感词
const handleCopy = async (row: SensitiveWordInfo) => {
  try {
    await navigator.clipboard.writeText(row.word);
    ElMessage.success("已复制到剪贴板");
  } catch (error) {
    console.error("复制失败:", error);
    ElMessage.error("复制失败");
  }
};

// 删除敏感词
const handleDelete = async (row: SensitiveWordInfo) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除敏感词"${row.word}"吗？此操作不可恢复。`,
      "确认删除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    const response = await deleteSensitiveWordApi(row.id);

    if (response.code === 200) {
      ElMessage.success("删除成功");
      handleRefresh();
    } else {
      ElMessage.error(response.message || "删除失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除失败:", error);
      ElMessage.error("删除失败");
    }
  }
};

// 批量操作
const handleBatchOperation = async (
  operation: "enable" | "disable" | "delete"
) => {
  if (selectedWords.value.length === 0) {
    ElMessage.warning("请先选择要操作的敏感词");
    return;
  }

  const operationMap = {
    enable: "启用",
    disable: "禁用",
    delete: "删除"
  };

  const actionText = operationMap[operation];

  try {
    await ElMessageBox.confirm(
      `确定要${actionText}选中的 ${selectedWords.value.length} 个敏感词吗？`,
      `确认${actionText}`,
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    let response;
    const ids = selectedWords.value.map(item => item.id);

    if (operation === "delete") {
      response = await batchDeleteSensitiveWordsApi(ids);
    } else {
      const status = operation === "enable" ? 1 : 0;
      response = await batchUpdateStatusApi({ ids, status });
    }

    if (response.code === 200) {
      ElMessage.success(`批量${actionText}成功`);
      selectedWords.value = [];
      handleRefresh();
    } else {
      ElMessage.error(response.message || `批量${actionText}失败`);
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error(`批量${actionText}失败:`, error);
      ElMessage.error(`批量${actionText}失败`);
    }
  }
};

// 导入
const handleImport = () => {
  showImport.value = true;
};

// 批量创建
const handleBatchCreate = () => {
  showBatchCreate.value = true;
};

// 更多操作
const handleMoreOperation = (command: string) => {
  switch (command) {
    case "popular":
      showPopularWords.value = true;
      break;
    case "system":
      showSystemManagement.value = true;
      break;
    case "statistics":
      // 跳转到统计页面或显示统计对话框
      ElMessage.info("统计分析功能开发中...");
      break;
  }
};

// 导出
const handleExport = async () => {
  try {
    const response = await exportSensitiveWordsApi(searchForm);

    // 创建下载链接
    const url = window.URL.createObjectURL(new Blob([response]));
    const link = document.createElement("a");
    link.href = url;
    link.download = `敏感词数据_${new Date().toISOString().slice(0, 10)}.xlsx`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);

    ElMessage.success("导出成功");
  } catch (error) {
    console.error("导出失败:", error);
    ElMessage.error("导出失败");
  }
};

// 表单成功回调
const handleFormSuccess = () => {
  showForm.value = false;
  handleRefresh();
};

// 导入成功回调
const handleImportSuccess = () => {
  showImport.value = false;
  handleRefresh();
};

// 批量创建成功回调
const handleBatchCreateSuccess = (result: BatchCreateResult) => {
  showBatchCreate.value = false;
  handleRefresh();

  // 显示详细结果
  let message = `批量创建完成！\n`;
  message += `成功: ${result.successCount} 个\n`;
  if (result.failedCount > 0) {
    message += `失败: ${result.failedCount} 个\n`;
  }
  if (result.existingCount > 0) {
    message += `已存在: ${result.existingCount} 个`;
  }

  ElMessage.success(message);
};

// 热门敏感词事件处理
const handleViewWordDetail = (word: PopularSensitiveWord) => {
  currentWordId.value = word.id;
  showDetail.value = true;
  showPopularWords.value = false;
};

const handleEditWord = (word: PopularSensitiveWord) => {
  currentWordId.value = word.id;
  formMode.value = "edit";
  showForm.value = true;
  showPopularWords.value = false;
};

// 组件挂载
onMounted(() => {
  loadWordList();
  loadStatistics();
});
</script>

<style scoped>
/* 响应式设计 */
@media (width <= 768px) {
  .sensitive-word-management {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .search-form {
    display: block;
  }

  .search-form .el-form-item {
    display: block;
    margin-right: 0;
  }

  .batch-info {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .batch-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (width <= 480px) {
  .header-actions .el-button {
    flex: 1;
    min-width: 0;
  }

  .batch-actions .el-button {
    flex: 1;
    min-width: 0;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .sensitive-word-management {
    background: #1a1a1a;
  }

  .batch-operations {
    background: #1e3a8a;
    border-color: #3b82f6;
  }
}

.sensitive-word-management {
  min-height: calc(100vh - 84px);
  padding: 24px;
  background: #f5f7fa;
}

/* 页面头部 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  margin-bottom: 24px;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgb(102 126 234 / 30%);
}

.header-content h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
}

.header-content p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 搜索卡片 */
.search-card {
  margin-bottom: 16px;
  border-radius: 12px;
}

.search-form {
  margin: 0;
}

.search-form .el-form-item {
  margin-bottom: 16px;
}

/* 批量操作 */
.batch-operations {
  margin-bottom: 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
}

.batch-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.batch-actions {
  display: flex;
  gap: 8px;
}

/* 表格卡片 */
.table-card {
  border-radius: 12px;
}

.sensitive-word-text {
  font-family: "Courier New", monospace;
  font-weight: 600;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.tag-item {
  margin: 0;
}

.text-placeholder {
  font-style: italic;
  color: #c0c4cc;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 16px 0;
  margin-top: 24px;
}

/* 表格优化 */
.el-table {
  overflow: hidden;
  border-radius: 8px;
}

.el-table .el-table__header-wrapper {
  border-radius: 8px 8px 0 0;
}

.el-table .el-table__body-wrapper {
  border-radius: 0 0 8px 8px;
}

/* 标签样式优化 */
.el-tag {
  font-weight: 500;
  border-radius: 6px;
}

/* 按钮组优化 */
.el-dropdown .el-button {
  border-radius: 6px;
}

/* 加载状态优化 */
.el-loading-mask {
  border-radius: 12px;
}

/* 卡片间距优化 */
.el-card {
  margin-bottom: 16px;
}

.el-card:last-child {
  margin-bottom: 0;
}
</style>
